<template>
  <div class="container">
    <!-- 测试指令 -->
    <!-- <input type="text" v-my-directive> -->
    <HomeCategory />
    <HomeBanner />
    <HomeNew />
    <HomeHot />
    <Product />
    <!-- 注意Props传的值加:,如果是数字会被转换为真的数字-->
    <!-- 两种形式 1 种大驼峰  2横杆链接 -->
    <!-- <XtxSkeleton width="100" height="30" bg="gray" /> -->
    <!-- <xtx-skeleton width="100" height="30" bg="gray" /> -->
  </div>
</template>

<script>
import HomeCategory from './components/home-category.vue'
import HomeBanner from './components/home-banner.vue'
import HomeNew from './components/home-new.vue'
import HomeHot from './components/home-hot.vue'
import Product from './components/home-product.vue'
import { getCurrentInstance, onMounted } from 'vue'
// import HomePannel from './components/home.panel'
// import Skeleton from '@/components/skeleton'
export default {
  components: {
    HomeCategory,
    HomeBanner,
    HomeNew,
    HomeHot,
    Product
    // HomePannel
    // Skeleton
  },
  setup () {
    onMounted(() => {
      const thisVue = getCurrentInstance()
      // console.log(thisVue.data, thisVue.appContext.config.globalProperties)
      return { thisVue }
    })
  }
}
</script>

<style lang="less" scoped>
// 手动引入less文件使用里面定义的less全局变量
// @import '~@/styles/variables.less'
.container {
  border: 2px solid @helpColor;
}
</style>
